<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>原生js计算元素的大小和位置</title>
  <style>
    .container {
      background-color: red;
      width: 100px;
      height: 100px;
    }

    .container::after {
      background-color: green;

    }
  </style>
</head>

<body>
  <div class="container"></div>

  <script>
    function camelize(attr) {
      //  /\-(\w)/g 对(\w)进行捕获，把匹配到的换成大写返回字母的时候不返回-
      return attr.replace(/\-(\w)/g, function (_, letter) {
        return letter.toUpperCase()
      })
    }

    //window.getComputedStyle("元素", "伪类").getPropertyValue(style);

    let contatiner = document.querySelector('.container')
    // console.log(getComputedStyle(contatiner, 'after')[camelize('background-color')])
    // console.log(window.getComputedStyle(contatiner).getPropertyValue('background-color'))

    // getStyle  setStyle

    const getStyle = (elem, style) => {
      // 主流浏览器
      if (window.getComputedStyle) {
        return window.getComputedStyle(elem).getPropertyValue(style)
        // 不支持 getComputedStyle
      } else {
        // IE 下获取透明度
        if (style == "opacity") {
          getIEOpacity(elem);
          // IE687 下获取浮动使用 styleFloat
        } else if (style == "float") {
          return elem.currentStyle.getAttribute("styleFloat");
          // 取高宽使用 getBoundingClientRect
        } else if ((style == "width" || style == "height") && (elem.currentStyle[style] == "auto")) {
          var clientRect = elem.getBoundingClientRect();

          return (style == "width" ? clientRect.right - clientRect.left : clientRect.bottom - clientRect.top) + "px";
        }
        // 其他样式，无需特殊处理
        return elem.currentStyle.getAttribute(camelize(style));
      }
    }


    // 设置样式
    function setStyle(elem, style, value) {
      // 如果是设置 opacity ，需要特殊处理
      if (style == "opacity") {
        //IE7 bug:filter 滤镜要求 hasLayout=true 方可执行（否则没有效果）
        if (!elem.currentStyle || !elem.currentStyle.hasLayout) {
          // 设置 hasLayout=true 的一种方法
          elem.style.zoom = 1;
        }
        // IE678 设置透明度叫 filter ，不是 opacity
        style = "filter";

        // !!转换为 boolean 类型进行判断
        if (!!window.XDomainRequest) {
          value = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=" + value * 100 + ")";
        } else {
          value = "alpha(opacity=" + value * 100 + ")"
        }
      }
      // 通用方法
      elem.style.cssText += ';' + (style + ":" + value);
    }
    setStyle(contatiner, 'width', '300px')
  </script>
</body>

</html>